$(function () {
    // 校验表单数据
    let form = layui.form
    form.verify({
        nickname: function (value) {
            if (value.length > 6) {
                return '昵称长度必须在 1 ~ 6 个字符之间！'
            }
        }
    })


    // 让页面一加载就发起ajax请求，然后获取数据，渲染页面

    initUserInfo()

    // 初始化用户的基本信息
    function initUserInfo() {
        $.ajax({
            method: 'GET',
            url: '/my/userinfo',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('获取用户信息失败！')
                }
                // console.log(res)
                // 这个是根据 对应的属性名来渲染的  比如数据res.data里面有 username  然后表单里面也有一个input 属性name=‘username’，就会对应渲染
                form.val('formUserInfo', res.data)
            }
        })

        $('#btnReset').on('click', function (e) {
            // 阻止表单的默认重置行为
            e.preventDefault()
            initUserInfo()
        })
    }

    // 绑定表单 form 一提交一下，submit  就会发起ajax请求，然后更新用户信息
    $('.layui-form').on('submit', function(e) {
        // 阻止表单的默认提交行为
        e.preventDefault()
        // 发起 ajax 数据请求
        $.ajax({
          method: 'POST',
          url: '/my/userinfo',
          data: $(this).serialize(),
          success: function(res) {
            if (res.status !== 0) {
              return layer.msg('更新用户信息失败！')
            }
            layer.msg('更新用户信息成功！')
            // 调用父页面中的方法，重新渲染用户的头像和用户的信息
            window.parent.getUserInfo()
          }
        })
      })
})